<template>
  <div v-if="easyFlowVisible" style="height: calc(100vh); background-color: #99a9bf">
    <!--    <div class="ef-tooltar">
          ef-tooltar
        </div>-->
    <div class="ef-container">
      <div class="ef-left">
        <el-scrollbar style="height: 1000px;">
          <draggable
            v-model="list"
            :options="{group:{name: 'people',pull:'clone'}}"
            animation="300"
            :move="onMove"
          >
            <transition-group>
              <div v-for="item in list" :key="item.id" class="tools-item-body">
                <i :class="item.icon"> </i> {{ item.name }}
              </div>
            </transition-group>
          </draggable>
        </el-scrollbar>
      </div>
      <div class="ef-work">
        <draggable
          v-model="form.inputs"
          animation="300"
          group="people"
          sort="false"
        >
          <transition-group style="width: 100%; min-height:600px;display: block;position:relative;">
            <span
              v-for="item in form.inputs"
              :key="item.id"
              class="component-item"
              :style="{top: item.top,left: item.left}"
            >
              {{ item.name }}
            </span>
          </transition-group>
        </draggable>
      </div>
      <div class="ef-right">
        ef-right
      </div>
    </div>
  </div>
</template>

<script>
import './jsplumb'
import inputs from './inputs'
import draggable from 'vuedraggable'
import { uuid } from '@/utils'

export default {
  components: {
    draggable
  },
  data() {
    return {
      jsPlumb: null,
      easyFlowVisible: true,
      list: [],
      form: {
        inputs: []
      }
    }
  },
  mounted() {
    this.list = inputs
  },
  methods: {
    onMove(e) {
      if (e && e.draggedContext) {
        const el = e.draggedContext.element
        el.top = e.relatedRect.top + 'px'
        el.left = e.relatedRect.left + 'px'
      }
    }
  }
}
</script>

<style scoped>

.ef-tooltar {
  height: 10%;
  width: 100%;
  background-color: #ffffff;
}

.ef-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  border: 1px solid #97a8be;
  background-color: #ffffff;
}

.ef-left {
  height: 100%;
  padding: 10px 10px;
  border-right: 1px solid #97a8be;
}

.ef-right {
  width: 15%;
  height: 100%;
  text-align: center;
}

.ef-work {
  width: 75%;
  height: 100%;
  border-right: 1px solid #97a8be;
}

.tools-item-body {
  margin-top: 10px;
  font-size: 14px;
  width: 100%;
  height: 50px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  line-height: 50px;
  border-radius: 5px;
  cursor: move;
  border: solid 1px #eee;
}

.component-item {
  width: 100px;
  height: 100px;
  cursor: move;
  position: absolute;
  border: 1px dashed #1879ff;
  background-color: #97a8be;
}
</style>
